<template>
  <fieldset>
    <legend>list组件</legend>
    <button @click="add">添加</button>
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </ul>
  </fieldset>
</template>
<script>

//子传父的流程

//1.首先，子传父是通过vue的事件机制来实现，需要主动调用$emit进行触发，$emit（“自定义的事件函数”，"要传递的参数"）
//2.在子组件的标签上，通过v-on绑定通过$emit发射的自定义事件，处理函数写在父组件的methods中
//3.在父组件的methods中，通过形参接收子组件传递的数据

     export default{
         data(){
             return{
                 arr:['aa','bb','cc']
             }
     },
     methods:{
         add(){
             //this指向的是当前组件实例
             console.log(this.data);
             this.arr.push(this.data)
             console.log(this.val);//没有值

             this.$emit('to-parent', "jiayou加油");
             
         }
     },
     props:['data']//在子组件的选项中,使用props属性接受传递的参数data
    }
</script>
